<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #d1 {
            outline: 0cm;
        }

        #d2 {
            outline: 0;
        }
        .d2{
            border: 1px solid pink;
        }

        .cs1 {
            border: 1px solid red;
        }
        .black{
            border: 2px solid black;
        }
        .green{
            border: 2px solid green;
        }
        #d3{
            outline: 0cm;
        }
    </style>
    <script>
        window.onload = function () {
            //当元素获得焦点时（onfocus）
            document.getElementById('d1').onfocus = function () {
               this.classList.add('cs1')//当元素获得焦点时为其改变边框颜色

            }

            //当元素失去焦点（onblur）
            document.getElementById('d2').onblur=function(){
                this.classList.remove('d2')//当元素失去焦点时改变边框颜色

            }
            //将表单d3设置为获得焦点时为绿色，焦点离开时为黑色
            document.getElementById('d3').onfocus=function(){
                this.classList.add('green');
            }
            document.getElementById('d3').onblur=function(){
                this.className='black'
            }
        }
    </script>
</head>

<body>

    用户名：<input type="text" id="d1">
    <br>
    密码：<input type="password" id="d2" class="d2">
    <input type="submit" value="登录">

    <input type="text" id="d3">
</body>

</html>